<script setup>
import {nextTick, ref} from "vue";
import {findRankById, updateRank} from "@/apis/zyj/ranks.js";
import {ElMessage} from "element-plus";


const ruleFormRef = ref();//表单验证

const props = defineProps({
  updataDialog: Boolean,
  form: Object
})

const handleOpenCardDialog = () => {
  nextTick(() => {
    // 清空校验
    ruleFormRef.value.clearValidate()
  })
}

const handleConfirm = (value) => {
  value.validate(valid => {
    if (valid) {
      updateRank(props.form).then(req => {
        console.log(req)
        if (req == '成功') {
          ElMessage.success('修改成功')
        } else {
          ElMessage.error('修改失败')
        }
        handleClose()
      })
    } else ElMessage.error('请填写完整信息');
  });
}

const emit = defineEmits(['close-dialog'])
const handleClose = () => {
  emit('close-dialog')
}
// 校验编码是否重复
const validateCode = (rule, value, callback) => {
  findRankById(value).then(res => {
    console.log(res)
    if (res) {
      callback(new Error('该编码已存在'))
    } else {
      callback()
    }
  })
}
// 表单验证
const rules = {
  rankArrangement: [
    {required: true, message: '职级层次不能为空', trigger: 'blur'},
  ],
  rankArrangementName: [
    {required: true, message: '职级层次名称不能为空', trigger: 'blur'},
  ],
  salaryCap: [
    {required: true, message: '薪资范围上限不能为空', trigger: 'blur'},
  ],
  salaryMinimum: [
    {required: true, message: '薪资范围下限不能为空', trigger: 'blur'},
  ]
}
</script>

<template>
  <div class="dialog-class">
    <el-dialog title="添加职级管理" v-model="props.updataDialog" @close="handleClose" @open="handleOpenCardDialog"
               width="55%">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="职级编码" prop="rankNo">
              <el-input v-model="form.rankNo" disabled placeholder="请输入职级编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 20px">
            <el-form-item label="职级层级" prop="rankArrangement">
              <el-input v-model="form.rankArrangement" placeholder="请输入职级层级"/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="职级层级名称" prop="rankArrangementName">
              <el-input v-model="form.rankArrangementName" placeholder="请输入职级层级名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="form.remark" placeholder="请输入备注"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="薪资范围下限" prop="salaryMinimum">
              <el-input v-model="form.salaryMinimum" placeholder="请输入薪资范围下限"/>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="薪资范围上限" prop="salaryCap">
              <el-input v-model="form.salaryCap" placeholder="请输入薪资范围上限"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
         <span class="dialog-footer">
           <el-button @click="handleClose">取消</el-button>
           <el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
         </span>
      </template>
    </el-dialog>
  </div>
</template>


<style scoped>
::v-deep(.el-form-item__label) {
  color: #606266;
  font-size: 14px;
  font-weight: 700;
}

:deep(.el-dialog__body) {
  padding: 20px 20px 20px 0;
}
</style>
